<template>
  <!-- CooperationSet 合作配置 -->
  <PageContainer>
    <view class="container">
      <Header title="合作配置" />
      <Association :info="info" />

      <view v-if="params.projectType !== CooperationProjectTypeEnum.MALL" class="fz-14 bgf mt-15">
        <view class="fz-16 fw-7 px-15 linh-44 borderBottom">合作价格配置</view>
        <!-- <view class="pa-15">
        <view class="disFlx">
          <view class="label">查看联系方式</view>

          <view class="inputBox">
            <UniEasyinput
            type="digit"
            maxlength="8"
            :inputBorder="false"
            :clearable="false"
            trim="all"
            v-model="pliceData.priceContact"
            @input="handleInput"
            >
              <template #right>元</template>
            </UniEasyinput>
          </view>
        </view>
        <view class="fz-12 fontTR">
          <view class="pt-5">服务费<text class="pliceNumber">{{ formatMoney(pliceData.priceContactSerivce, true) }}</text>,可分润金额<text
              class="pliceNumber">{{ formatMoney(pliceData.priceContactSum, true) }}</text></view>
        </view>
      </view>  -->
        <view class="pa-15">
          <view class="disFlx">
            <view class="label">秘书处撮合沟通对接</view>
            <view class="inputBox">
              <UniEasyinput
                type="digit"
                maxlength="8"
                :inputBorder="false"
                :clearable="false"
                trim="all"
                v-model="pliceData.pricePeople"
                @input="handleInput"
              >
                <template #right>元</template>
              </UniEasyinput>
            </view>
          </view>
          <view class="fz-12 fontTR">
            <view class="pt-5">
              服务费
              <text class="pliceNumber">{{ formatMoney({ money: pliceData.pricePeopleSerivce, showFreeText: true }) }}</text>
              ,可分润金额
              <text class="pliceNumber">{{ formatMoney({ money:pliceData.pricePeopleSum, showFreeText: true }) }}</text>
            </view>
          </view>
        </view>
      </view>

      <view class="fz-14 bgf mt-15">
        <view class="fz-16 fw-7 px-15 linh-44 borderBottom">合作分润配置</view>
        <view class="pa-15">
          <view class="disFlx">
            <view class="label">合作组织分润比例</view>
            <view class="inputBox">
              <UniEasyinput
                type="digit"
                maxlength="3"
                :inputBorder="false"
                :clearable="false"
                trim="all"
                v-model="pliceData.discount2"
                @input="handleInput"
              >
                <template #right>%</template>
              </UniEasyinput>
            </view>
          </view>
          <view
            v-if="params.projectType !== CooperationProjectTypeEnum.MALL"
            class="fz-12 pt-5 fontTR"
          >
            <!-- <view class="pt-5">查看联系方式：佣金率约<text class="pliceNumber">{{ pliceData.discount2 }}%</text>,合作分润金额<text
              class="pliceNumber">{{ formatMoney(pliceData.priceContactComputeTo, true) }}</text></view> -->
            <view class="pt-5">
              秘书处撮合沟通对接：佣金率约
              <text class="pliceNumber">{{ pliceData.discount2 }}%</text>
              ,合作分润金额
              <text class="pliceNumber">
                {{ formatMoney({ money: pliceData.pricePeopleComputeTo, showFreeText: true }) }}
              </text>
            </view>
          </view>
        </view>
        <view class="pa-15">
          <view class="disFlx">
            <view class="label">
              <text>本组织剩余比例</text>
              <text class="pl-12"></text>
            </view>
            <view class="inputBox disabled">
              <UniEasyinput
                type="digit"
                maxlength="3"
                :inputBorder="false"
                :clearable="false"
                trim="all"
                v-model="pliceData.discount"
                disabled
              >
                <template #right>%</template>
              </UniEasyinput>
            </view>
          </view>
          <view class="fz-12 pt-5">
            <!-- <view class="pt-5">查看联系方式：佣金率约<text class="pliceNumber">{{ pliceData.discount }}%</text>,合作分润金额<text
              class="pliceNumber">{{ formatMoney(pliceData.priceContactCompute, true) }}</text></view> -->

            <view
              class="pt-5 mall-tips"
              v-if="params.projectType === CooperationProjectTypeEnum.MALL"
            >
              举例计算:产品单价
              <text class="text">100元</text>
              ，秘书处抽取佣金
              <text class="text">10元</text>
              ，设置合作组织分润比例为
              <text class="text">40%</text>
              ，则最终合作组织获得分润佣金
              <text class="text">10*40%=4元</text>
              ，本组织秘书处获得剩余佣金
              <text class="text">6元</text>
              。
            </view>
            <view v-else class="pt-5 fontTR">
              秘书处撮合沟通对接：佣金率约
              <text class="pliceNumber">{{ pliceData.discount }}%</text>
              ,合作分润金额
              <text class="pliceNumber">{{ formatMoney({ money: pliceData.pricePeopleCompute, showFreeText: true }) }}</text>
            </view>
          </view>
        </view>
      </view>

      <TButtonGroup>
        <TButton
          class="gutter-btn"
          :text="calcLoading ? '计算中...' : '保存'"
          :type="'primary'"
          @click="seveSet"
        />
        <TButton
          class="gutter-btn"
          text="取消"
          :type="'none'"
          custom-class="coopClose"
          @click="goBack"
        />
      </TButtonGroup>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /**  CooperationSet  合作配置 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import Association from '../components/association.vue';
  import UniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue';
  import { ref, unref } from 'vue';
  import { onLoad, navigateBack } from '@/router';

  import { loadPliceSet, editPliceLoad } from '@/api/cooperation';
  import { type PliceSet } from '@/api/cooperation/types';
  import { UniEmitNameEnum } from '@/enums/uniEmitEnum';
  import { formatMoney } from '@/utils/number';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import { CooperationProjectTypeEnum } from '@/enums/cooperationEnum';

  const info = uni.getStorageSync('_CLICK_INFO');
  const params = ref({
    tenantId: info.tenantId,
    projectType: CooperationProjectTypeEnum.FRIEND,
  });
  onLoad<'CooperationSet'>((op) => {
    params.value.projectType = op.projectType;
    getData();
  });

  const pliceData = ref({} as PliceSet);
  const getData = function () {
    loadPliceSet(unref(params)).then((res) => {
      pliceData.value = res;
    });
  };

  const times = ref();
  const calcLoading = ref(false); // 是否在计算中
  const handleInput = function () {
    calcLoading.value = true;
    clearTimeout(times.value);
    times.value = setTimeout(() => {
      pliceData.value.discount2 = +(pliceData.value.discount2 > 100
        ? 100
        : pliceData.value.discount2);
      pliceData.value.discount = 100 - pliceData.value.discount2;
      upData();
    }, 1000);
  };

  const upData = function () {
    editPliceLoad({
      tenantId: info.tenantId,
      priceContact: +pliceData.value.priceContact,
      pricePeople: +pliceData.value.pricePeople,
      discount: pliceData.value.discount,
    }).then((res) => {
      pliceData.value = res;
      calcLoading.value = false;
    });
  };

  // 保存并更新上个页面数据
  const seveSet = function () {
    if (unref(calcLoading)) return;
    uni.$emit(UniEmitNameEnum.REFRESHPREVIOUSPAGE, {
      projectType: unref(params).projectType,
      discount: unref(pliceData).discount2,
      priceContact: unref(pliceData).priceContact,
      priceContactCompute: unref(pliceData).priceContactComputeTo,
      pricePeople: unref(pliceData).pricePeople,
      pricePeopleCompute: unref(pliceData).pricePeopleComputeTo,
    });
    goBack();
  };
  const goBack = function () {
    navigateBack();
  };
</script>

<style lang="scss" scoped>
  .label {
    width: 230rpx;
    margin-right: 30rpx;
    height: 86rpx;
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .inputBox {
    flex: 1;
    border: solid 1px #dddddd;
    border-radius: 20rpx;
    padding: 6rpx 26rpx;
    display: flex;
    align-items: center;
  }
  .inputBox.disabled {
    background-color: #f7f6f6;
  }

  .fontTR {
    text-align: right;
  }

  .pliceNumber {
    color: #b47026;
  }
  .mall-tips {
    color: #999996;
    font-size: 24rpx;
    .text {
      color: #e29942;
    }
  }
</style>
<style scoped>
  .inputBox >>> .uni-easyinput {
    text-align: right !important;
  }
</style>
